<template>
  <!-- 标题头 -->
  <van-nav-bar
    title="专科频道"
    left-arrow
    @click-left="onClickLeft"
    class="title"
  />
  <div class="channel">
    <!-- 特色专科 -->
    <div class="special">
      <h4>特色专科</h4>
      <div class="imglist">
        <div>
          <img src="https://z3.ax1x.com/2021/07/17/WQ4zYq.png" alt="" />
        </div>
        <div>
          <img src="https://z3.ax1x.com/2021/07/17/WQ5E79.png" alt="" />
        </div>
        <div>
          <img src="https://z3.ax1x.com/2021/07/17/WQ5et1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 常见科室 -->
    <div class="offices">
      <h4 class="normal">常见科室</h4>
      <van-grid :gutter="6.5" class="icon-wrap" icon-size="50px">
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQ530H.png"
          text="男科"
        >
        </van-grid-item>
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQIwP1.png"
          text="结石科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQI4RP.png"
          text="肿瘤科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQI08x.png"
          text="消化内科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQIDxK.png"
          text="耳鼻咽喉科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQoSMT.png"
          text="精神心理科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQTMcV.png"
          text="康复科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQoOmD.png"
          text="皮肤科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQoX0e.png"
          text="中医科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQoxkd.png"
          text="小儿外科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQTSfI.png"
          text="眼科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQT9pt.png"
          text="口腔科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQT874.png"
          text="疼痛科"
        />
        <van-grid-item
          class="icon"
          icon="https://z3.ax1x.com/2021/07/17/WQTthR.png"
          text="营养科"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.push("/home/index");
    };
    return {
      onClickLeft,
    };
  },
};
</script>

<style lang="less">
//标题头
.van-icon-arrow-left {
  font-size: 20px !important;
  color: #333 !important;
  font-weight: 500;
}
.van-ellipsis {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.channel {
  padding: 0 14px;
  background: white;

  .title {
    height: 54px;
  }
  h4 {
    width: 71px;
    height: 18px;
    padding: 18px 0 22px 0;
    margin-bottom: 22px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 18px;
  }
  //特色专科图片列表
  .imglist {
    display: flex;
    div {
      width: 110px;
      height: 144px;
      margin-right: 7.5px;
      img {
        width: 100%;
        height: 100%;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .normal {
    padding: 35px 0 26px 0;
    margin-bottom: 17px;
  }
  //常见科室图片列表
  .icon-wrap {
    .icon {
      width: 79px;
      height: 92px;
    }
    .van-icon__image {
      height: 40px;
    }
    .van-grid-item__content {
      background-color: #f9fafe;
      border-radius: 5px;
    }
    .van-grid-item:first-of-type {
      .van-icon__image {
        transform: translateX(10px);
      }
    }
    .van-grid-item:nth-of-type(2) {
      .van-icon__image {
        transform: translateX(10px);
      }
    }
    .van-grid-item__text {
      transform: translateY(-8px);
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 18px;
    }
  }
}
</style>
